<template>
  <div class="dashboard-container" style="width: 100%;padding:0;margin:0;">
    <!-- 顶部标题栏 -->
    <el-row class="header-row">
      <el-col :span="24" class="header-content">
        <h1>饮食管理</h1>
        <div class="header-info">
          <el-button type="success" @click.native="update_weight_dialog_visible=true">
            更新体重
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!--模态框。-->
    <el-dialog title="更新体重" :visible.sync="update_weight_dialog_visible">
      <el-form :model="update_weight_form" @keyup.enter.native="update_weight">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              :default-value="new Date()"
              v-model="update_weight_form.date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="体重/kg" :label-width="formLabelWidth">
          <el-input placeholder="请输入你的体重(kg)" v-model="update_weight_form.weight"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="update_weight_dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="update_weight">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 指标卡片 -->

    <!-- 摄入 -->
    <h1 class="font-bold ml-2.5 text-purple-500" style="font-size:1.5rem"><i class="el-icon-food"></i> 饮食摄入</h1>
    <!--编辑模态框。-->
    <el-dialog title="编辑摄入" :visible.sync="edit_intake_dialog_visible">
      <el-form :model="edit_intake_form" @keyup.enter.native="edit_intake">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              v-model="edit_intake_form.date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="食物类型" :label-width="formLabelWidth">
          <el-select
              v-model="edit_intake_form.id"
              placeholder="食物类别"
              filterable
              @change="intake_food_cate_change"
          >
            <el-option v-for="item in intake_food_cate_list" :key="item.id" :label="item.food_cate_name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="食物名称" :label-width="formLabelWidth">
          <el-select
              v-model="edit_intake_form.second_cate_id"
              placeholder="支出二级分类"
              filterable
          >
            <el-option v-for="item in intake_food_list_options" :key="item.id" :label="item.food_name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支出金额" :label-width="formLabelWidth">
          <el-input placeholder="请输入该笔支出金额" v-model="edit_intake_form.amount"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="edit_intake_form.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit_intake_dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="edit_intake">确 定</el-button>
      </div>
    </el-dialog>
    <!--概况-->
    <el-row :gutter="8" class="kpi-row">
      <el-col :span="6" v-for="(item, index) in ExpenseCardList" :key="index" class="kpi-card">

        <el-card :body-style="{ padding: '15px' }" style="margin-top: 1rem">
          <div class="kpi-title">{{ item.name }}</div>
          <div class="kpi-value" :title="item.origin_value">

            {{ item.value }}
          </div>
          <div class="kpi-trend" v-if="item.trend" :class="{ up: item.trend > 0, down: item.trend < 0 }">
            <i :class="item.trend > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            {{ Math.abs(item.trend) }}%
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="chart-row" style="margin-top: 1rem">
      <!--结构饼图-->
      <el-col :span="8" class="chart-card" style="height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-pie-chart"></i> 饮食结构</span>
            <!--          选择日期-->
            <el-date-picker
                style="margin-bottom: 1rem"
                placeholder="选择饮食摄入日期"
                v-model="intake_date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="date"
            ></el-date-picker>
          </div>
          <div style="height: 400px">
            <PieChartComponent :title="'饮食结构'" :data="exp_struct"></PieChartComponent>
          </div>
        </el-card>
      </el-col>
      <!-- 表格 -->
      <el-col :span="16" class="chart-card" style="height: 500px">

        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-table"></i> 饮食摄入明细</span>
            <el-button
                type="success"
                @click="open_intake_dialog"
            >
              新增饮食摄入
            </el-button>
          </div>

          <div>
            <el-table
                height="360"
                border
                :data="intake_data"
                style="width: 100%"
                class="ml-5"
                :summary-method="getTableSummary"
                show-summary
            >
              <el-table-column
                  prop="intake_date"
                  label="日期"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="food_cate_name"
                  align="center"
                  label="食物类型">
              </el-table-column>
              <el-table-column
                  prop="food_name"
                  align="center"
                  label="食物名称">
              </el-table-column>
              <el-table-column
                  prop="act_intake_gram"
                  align="center"
                  label="摄入克重"
                  sortable>
                <!-- 格式化数值，保留1位小数（可选） -->
                <template #default="scope">
                  {{ scope.row.act_intake_gram ? scope.row.act_intake_gram.toFixed(1) : '0.0' }}
                </template>
              </el-table-column>
              <el-table-column
                  prop="act_intake_kcal"
                  label="摄入热量"
                  sortable
                  align="center">
                <!-- 格式化数值，保留2位小数（符合热量精度） -->
                <template #default="scope">
                  {{ scope.row.act_intake_kcal ? scope.row.act_intake_kcal.toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column
                  prop="note"
                  align="center"
                  label="备注">
              </el-table-column>
              <el-table-column
                  prop="execute"
                  label="操作"
                  align="center">
                <template #default="scope">
                  <!-- 编辑按钮 -->
                  <el-button
                      size="small"
                      type="primary"
                      icon="el-icon-edit"
                      @click="handleEdit(scope.row)">
                  </el-button>
                  <!-- 删除按钮 -->
                  <el-popconfirm
                      style="margin-left: 1rem"
                      confirm-button-text='确定'
                      cancel-button-text='取消'
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除此记录吗？"
                      @confirm="handleDelete(scope.row.id)"
                  >
                    <el-button
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                        slot="reference"
                    >
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <div class="pagination-container">
              <el-pagination
                  @size-change="exp_size_change"
                  @current-change="exp_current_change"
                  :current-page="intakeCurrentPage"
                  :page-sizes="[5, 20, 30, 40]"
                  :page-size="intakePageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="IntakeTotalCount"
              ></el-pagination>
            </div>
          </div>

        </el-card>
<!--        <el-dialog title="新增饮食摄入" :visible.sync="intake_add_dialog_visible">-->
<!--          <el-form :model="add_intake_form" @keyup.enter.native="add_intake">-->

<!--            <el-form-item label="日期" :label-width="formLabelWidth">-->
<!--              <el-date-picker-->
<!--                  type="date"-->
<!--                  value-format="yyyy-MM-dd"-->
<!--                  v-model="add_intake_form.date"-->
<!--                  @change="get_today_bmr"-->
<!--              ></el-date-picker>-->
<!--              <el-tag-->
<!--                  v-if="today_bmr !== null"-->
<!--                  :type="today_bmr > 0 ? 'success' : 'warning'"-->
<!--                  style="margin-top: 8px; display: inline-block;"-->
<!--              >-->
<!--                {{-->
<!--                  today_bmr > 0-->
<!--                      ? `基础代谢值：${today_bmr.toFixed(1)} kcal`-->
<!--                      : '请选择日期'-->
<!--                }}-->
<!--              </el-tag>-->
<!--              <el-tag-->
<!--                  v-if="rest_bmr !== null"-->
<!--                  :type="rest_bmr > 0 ? 'success' : 'warning'"-->
<!--                  style="margin-top: 8px; display: inline-block;"-->
<!--              >-->
<!--                {{-->
<!--                  rest_bmr > 0-->
<!--                      ? `当日剩余可摄入热量：${rest_bmr.toFixed(1)} kcal`-->
<!--                      : '请选择日期'-->
<!--                }}-->
<!--              </el-tag>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="食物类型" :label-width="formLabelWidth">-->
<!--              <el-select-->
<!--                  v-model="add_intake_form.cate_id"-->
<!--                  placeholder="食物类型"-->
<!--                  filterable-->
<!--                  @change="intake_food_cate_change"-->
<!--              >-->
<!--                <el-option v-for="item in intake_food_cate_list" :key="item.id" :label="item.food_cate_name"-->
<!--                           :value="item.id"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="食物名称" :label-width="formLabelWidth">-->
<!--              <el-select-->
<!--                  v-model="add_intake_form.food_id"-->
<!--                  placeholder="食物名称"-->
<!--                  filterable-->
<!--              >-->
<!--                <el-option v-for="item in intake_food_list_options" :key="item.id" :label="item.food_name"-->
<!--                           :value="item.id"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="克重" :label-width="formLabelWidth">-->
<!--              <el-input-->
<!--                  placeholder="请输入这份食物的实际克重（g）"-->
<!--                  v-model="add_intake_form.act_intake_gram"-->
<!--                  @input="calculate_calorie"-->
<!--                  type="number"-->
<!--                  min="1"-->
<!--              ></el-input>-->
<!--              &lt;!&ndash; 卡路里显示标签：根据计算结果动态变化样式和内容 &ndash;&gt;-->
<!--              <el-tag-->
<!--                  v-if="calculated_calorie !== null"-->
<!--                  :type="calculated_calorie > 0 ? 'success' : 'warning'"-->
<!--                  style="margin-top: 8px; display: inline-block;"-->
<!--              >-->
<!--                {{-->
<!--                  calculated_calorie > 0-->
<!--                      ? `预估卡路里：${calculated_calorie.toFixed(1)} kcal`-->
<!--                      : '请输入有效克重（≥1g）'-->
<!--                }}-->
<!--              </el-tag>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="备注" :label-width="formLabelWidth">-->
<!--              <el-input v-model="add_intake_form.note"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--          <div slot="footer" class="dialog-footer">-->
<!--            <el-button @click="intake_add_dialog_visible = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="add_intake">确 定</el-button>-->
<!--          </div>-->
<!--        </el-dialog>-->
        <el-dialog title="新增饮食摄入" :visible.sync="intake_add_dialog_visible">
          <FoodPickView></FoodPickView>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="chart-row" style="margin-top: 1rem">
      <!--趋势曲线图-->
      <el-col :span="14" class="chart-card" style="height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-line-chart"></i> 热量缺口变化趋势</span>
          </div>
          <div style="height: 400px">
            <BarChartComponent :title="'当月热量缺口变化'"></BarChartComponent>
          </div>
        </el-card>
      </el-col>
      <!--趋势曲线图-->
      <el-col :span="10" class="chart-card" style="height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-line-chart"></i> 摄入热量趋势</span>
          </div>
          <div style="height: 400px">
            <TechLineChart :title="'当月饮食摄入趋势'"
                           :chart-data="exp_line_data"></TechLineChart>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="chart-row" style="margin-top: 1rem">
      <!--趋势曲线图-->
      <el-col :span="24" class="chart-card" style="height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-line-chart"></i> 体重变化趋势图</span>
          </div>
          <div style="height: 400px">
            <BarChartComponent :title="'当月体重变化（kg）'"></BarChartComponent>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import axios from 'axios'

import PieChartComponent from "@/components/ChartComponent/PieChartComponent.vue";
import TechLineChart from "@/components/ChartComponent/LineChartComponent.vue";
import moment from 'moment';
import BarChartComponent from "@/components/ChartComponent/BarChartComponent.vue";
import FoodPickView from "@/components/FoodPickComponent.vue";

export default {
  computed: {},
  components: {FoodPickView, BarChartComponent, TechLineChart, PieChartComponent},
  name: 'FoodView',

  data() {
    return {

      // 表格当前页显示的数据
      intake_data: [],
      // 当前页码
      intakeCurrentPage: 1,
      // 每页显示条数
      intakePageSize: 5,
      // 总数据条数
      IntakeTotalCount: 0,

      // 支出指标卡数据
      ExpenseCardList: [
        {name: "当年累计支出", value: "100万"},
        {name: "当月累计支出", value: "12万"},
      ],
      // 当日支出明细
      all_intake: [],
      // 支出时间选择
      intake_date: moment(new Date()).format('YYYY-MM-DD'),
      // 支出结构数据。
      exp_struct: [],

      // 支出曲线图
      exp_line_data: {
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          {name: '数据A', data: [120, 132, 101, 134, 90, 230, 210, 230, 190, 230, 210, 170]},
        ]
      },

      // 新增支出弹窗表单组件配置项
      intake_add_dialog_visible: false,

      // 新增饮食摄入表单
      add_intake_form: {
        date: '', // 日期
        cate_id: '', // 食物类型ID
        food_id: '', // 食物ID（对应food_cal表的id）
        act_intake_gram: '', // 实际摄入克重
        note: '' // 备注
      },
      formLabelWidth: '120px',
      // 计算后的卡路里（null表示未计算，0表示无效值）
      calculated_calorie: null,
      // 编辑饮食摄入表单模态框
      edit_intake_dialog_visible: false,
      // 编辑饮食摄入表单
      edit_intake_form: {},

      // 所有一级分类列表
      intake_food_cate_list: [],
      // 基于一级分类筛选的可选的二级分类
      intake_food_list_options: [],

      // 所有一级分类列表
      inc_first_cate_list: [],
      // 基于一级分类筛选的可选的二级分类
      inc_second_cate_options: [],

      // 新增收入弹窗表单组件配置项
      inc_add_dialog_visible: false,
      add_inc_form: {},
      // 当日收入明细
      all_inc: [],
      // 收入时间选择
      inc_date: moment(new Date()).format('YYYY-MM-DD'),
      inc_data: [],
      // 当前页码
      IncCurrentPage: 1,
      // 每页显示条数
      IncPageSize: 5,
      // 总数据条数
      IncTotalCount: 0,
      // 收入
      edit_inc_form: {},
      edit_inc_dialog_visible: false,
      inc_struct: [],

      // 体重显示
      update_weight_dialog_visible: false,
      update_weight_form: {
        // 日期
        date: moment(new Date()).format('YYYY-MM-DD'),
        //体重kg
        weight: ''
      },
      // 当日基础代谢值
      today_bmr: null,
      // 当日剩余可摄入的热量
      rest_bmr: null,

    }
  },
  created() {
    this.call_intake_all_first_cate()
  },
  mounted() {
    this.call_exp_card_data()
    this.call_exp_struct_data()
    this.call_daily_intake_data()
  },
  beforeDestroy() {
  },
  methods: {
    // 格式化数据
    formatData(value) {
      // 处理超过万的数值，保留两位小数并显示为“x.xx万”
      if (value >= 10000) {
        return (value / 10000).toFixed(2) + '万';
      } else if (value > 1) {
        return value.toFixed(2)
      }
      // 处理小数（这里假设小于1的数值是比例值，需要转成百分比）
      else if (value > 0 && value < 1) {
        return (value * 100).toFixed(2) + '%';
      }
      // 其他情况（如整数、不符合上述条件的小数等），直接返回原值
      else {
        return value
      }
    },

    // 支出卡片累计数据
    call_exp_card_data() {

      // 然后用这个instance发送请求
      this.$axios.post('/exp/statistics', {
        year: this.intake_date,
        month: this.intake_date,
        user_id: 1
      })
          .then(response => {
            this.ExpenseCardList = response.data.data.map(item => ({
              ...item,
              value: this.formatData(item.value)
            }))
          })
    },

    // 支出结构数据
    call_exp_struct_data() {
      this.$axios.post('/exp/exp_struct', {
        user_id: 1,
        start_date: this.intake_date
      })
          .then(response => {
            this.exp_struct = response.data.data.map(item => ({
              ...item,
              value: this.formatData(item.value)
            }))
          })

    },
    // 某日饮食摄入明细数据。
    call_daily_intake_data() {
      this.$axios.post('/health/food/get_intake_record', {
        date_str: this.intake_date
      })
          .then(response => {
            // 修复：数据转换语法错误 + 补充热量字段转换
            this.all_intake = response.data.data.map(item => ({
              ...item, // 复制原有字段
              // 关键修复：正确转换克重和热量为数值类型（避免字符串求和）
              act_intake_gram: Number(item.act_intake_gram) || 0, // 转换失败默认0
              act_intake_kcal: Number(item.act_intake_kcal) || 0  // 补充热量字段转换（之前漏了）
            }));
            this.intake_pg_change(); // 分页逻辑（推测是给intake_data赋值）
            this.IntakeTotalCount = this.all_intake.length;
          })
          .catch(error => {
            console.error('请求饮食数据失败：', error);
          });
    },

    // 某月支出数据
    call_month_exp_data() {
      // 然后用这个instance发送请求
      this.$axios.post('/exp/month_exp', {
        user_id: 1,
        date: this.intake_date
      })

          .then(response => {
            if (response.data.data.avg_amount !== 0.0) {
              this.exp_line_data.series = response.data.data.y_axis
              this.exp_line_data.xAxis = response.data.data.x_axis

              // 数据分析值
              this.ExpenseCardList.push({name: "月支出标准差", value: this.formatData(response.data.data.std_dev)})
              this.ExpenseCardList.push({name: "支出均值", value: this.formatData(response.data.data.avg_amount)})
            }

          })
          .catch(error => {
            console.error(error);
          });
    },

    // 处理每页条数变化
    exp_size_change(val) {
      this.intakePageSize = val;
      // 重置为第一页
      this.intakeCurrentPage = 1;
      this.intake_pg_change();
    },

    // 处理页码变化
    exp_current_change(val) {
      this.intakeCurrentPage = val;
      this.intake_pg_change();
    },

    // 处理分页逻辑
    intake_pg_change() {
      // 计算起始索引
      const startIndex = (this.intakeCurrentPage - 1) * this.intakePageSize;
      // 计算结束索引
      const endIndex = startIndex + this.intakePageSize;
      // 截取数据，实现前端分页
      this.intake_data = this.all_intake.slice(startIndex, endIndex);
    },

    // [支出]获取所有的一级分类
    call_intake_all_first_cate() {
      this.$axios.get('/health/food/get_food_cate_list')
          .then(response => {
            this.intake_food_cate_list = response.data.data.map(item => ({
              ...item,
            }))
          })
    },

    // [支出]根据一级分类id筛选可选择的二级分类
    call_food_list_by_id(cate_id) {
      this.$axios.post('/health/food/get_food_name_by_cate_id', {
        cate_id: cate_id
      }).then(response => {
        if (response.data.code === 200) {
          this.intake_food_list_options = response.data.data.map(item => ({
            ...item,
          }))
        }
      }).catch()
    },

    // 【饮食摄入】选择好食物类别后，自动加载可选的食物信息列表。
    intake_food_cate_change(newVal) {
      this.add_intake_form.id = ''; // 清空食物选择
      this.add_intake_form.act_intake_gram = ''; // 清空克重输入
      this.calculated_calorie = null; // 重置计算结果
      this.call_food_list_by_id(newVal)
    },

    //【支出】打开编辑界面
    handleEdit(row) {
      this.edit_intake_dialog_visible = true;
      this.edit_intake_form = row
    },

    // 【支出】提交编辑表单。
    async edit_intake() {
      try {
        const res = await this.$axios.post('/exp/edit_exp', this.edit_intake_form);
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '更新成功。'
          });

        } else if (res.data.code === 400) {
          this.$message({
            type: 'error',
            message: '更新失败' + res.data.message
          });
        }
      } catch (error) {
        // 可以在这里处理请求失败的情况（例如网络错误、后端返回错误等）
        console.error('更新失败：', error);
        this.$message({
          type: 'error',
          message: '更新失败，请重试。'
        });
      }
    },

    // 【支出】根据id删除支出
    handleDelete(id) {
      this.$axios.post('/exp/delete_exp', {
        exp_id: id
      }).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: "删除成功。"
          })
          window.location.reload()
        } else if (res.data.code === 400) {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },


    // 克重输入变化时计算卡路里
    calculate_calorie() {
      // 1. 初始化计算结果
      this.calculated_calorie = null;

      // 2. 校验必要条件：必须选择食物 + 输入有效克重
      const selectedFood = this.intake_food_list_options.find(
          item => item.id === this.add_intake_form.food_id
      );
      const actualGram = Number(this.add_intake_form.act_intake_gram);

      // 3. 输入校验（友好提示）
      if (!this.add_intake_form.food_id) {
        this.calculated_calorie = 0; // 触发"请选择食物"提示
        return;
      }
      if (isNaN(actualGram) || actualGram < 1) {
        this.calculated_calorie = 0; // 触发"请输入有效克重"提示
        return;
      }
      if (!selectedFood || !selectedFood.gram_per_piece || !selectedFood.kcal_per_piece) {
        this.calculated_calorie = 0;
        console.warn('食物数据不完整，无法计算卡路里');
        return;
      }

      // 4. 卡路里计算逻辑：(实际克重 / 每份标准克重) * 每份标准卡路里
      const kcal_per_gram = selectedFood.kcal_per_piece / selectedFood.gram_per_piece
      const calorie = actualGram * kcal_per_gram

      // 5. 结果处理（保留1位小数，避免过多小数位）
      this.calculated_calorie = Math.max(0, calorie); // 确保结果非负
    },

    // 新增提交方法（已存在）：可添加计算结果校验
    add_intake() {
      // 提交前校验：确保已计算出有效卡路里
      if (this.calculated_calorie === null || this.calculated_calorie <= 0) {
        this.$message.warning('请输入有效克重以计算卡路里');
        return;
      }
      // 后续提交逻辑：可将 calculated_calorie 一起传入接口
      this.add_intake_form.calculated_calorie = this.calculated_calorie.toFixed(1) // 携带计算结果
      // 接口调用...
      // this.$axios.post('')
      this.$axios.post('health/food/add_intake_record', this.add_intake_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('新增成功！')
        } else {
          this.$message.error(res.data.message)
        }
      }).catch()
      // this.$router.push({name: FoodPickComponent})
    },

    // 更新体重请求
    update_weight() {
      this.$axios.post('/health/weight/submit_weight', this.update_weight_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取今日的基础代谢值
    get_today_bmr(newDate) {
      this.$axios.post('/health/weight/get_bmr', {
        date: newDate
      }).then(res => {
        if (res.data.code === 200) {
          this.today_bmr = Number(res.data.data)
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(error => {
        this.$message.error("失败！" + error)
      })
    },
    // 表格合计方法
    getTableSummary(param) {
      const {columns, data} = param;
      const sums = [];

      columns.forEach((column, index) => {
        // 第一列显示"合计"文字
        if (index === 0) {
          sums[index] = '合计';
          return;
        }

        // 只对 摄入克重 和 摄入热量 列进行求和
        if (column.property === 'act_intake_gram') {
          // 计算克重总和，保留1位小数
          const total = data.reduce((acc, curr) => {
            const value = Number(curr.act_intake_gram) || 0;
            return acc + value;
          }, 0);
          sums[index] = total.toFixed(1);
        } else if (column.property === 'act_intake_kcal') {
          // 计算热量总和，保留2位小数
          const total = data.reduce((acc, curr) => {
            const value = Number(curr.act_intake_kcal) || 0;
            return acc + value;
          }, 0);
          sums[index] = total.toFixed(2);
        } else {
          // 其他列（食物类型、名称、备注、操作）合计行留空
          sums[index] = '';
        }
      });

      return sums;
    },
    //
    open_intake_dialog() {
      // this.$router.push({name: "FoodPickView"})
      this.intake_add_dialog_visible = true
    }

  },
  watch: {
    intake_date: {
      deep: true,
      immediate: true,
      handler() {
        this.call_daily_intake_data()
        this.call_exp_card_data()
        this.call_exp_struct_data()
        this.call_month_exp_data()
      }
    },
  }


}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.header-row {
  margin-bottom: 20px;
}

.header-content {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.update-time {
  color: #666;
  font-size: 14px;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  height: 100%;
}

.kpi-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.kpi-card .el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.kpi-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  color: #e74c3c;

}

.kpi-trend.down {
  color: #42b983;

}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.chart-container {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .kpi-card {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .chart-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .kpi-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .chart-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-info {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .kpi-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.is-selected {
  color: #1989FA;
}
</style>

<style scoped>
.table-pagination-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>
